<template>
  <div class="tree-view">
    <TreeMenus :list="state.list"></TreeMenus>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive } from 'vue'
import { list } from './tree'
console.log(list, 'list')
import { TreeArrayType } from './tree.d'
export default defineComponent({
  setup() {
    const state = reactive({
      list: list
    })

    // 递归给数据内部每一条都加上一个字段 show=false
    const recursionFunc = (list: TreeArrayType[]) => {
      list.forEach((item) => {
        // item.show = false
        ;(item as any).show = false
        if (item.children) {
          recursionFunc(item.children)
        }
      })
    }
    recursionFunc(state.list)
    // 先让第一层数据展开，不隐藏
    state.list.forEach((item) => {
      ;(item as any).show = true
    })

    console.log('state:;', state.list)

    // return一个新对象，如果是响应式数据，不能结构抛出
    return { state }
  }
})
</script>
